import { useState, useRef } from 'react'
function CatFriends() {
  const firstCatRef = useRef(null)
  const secondCatRef = useRef(null)
  const thirdCatRef = useRef(null)

  function handleScrollToFirstCat() {
    firstCatRef.current.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'center',
    })
  }

  function handleScrollToSecondCat() {
    secondCatRef.current.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'center',
    })
  }

  function handleScrollToThirdCat() {
    thirdCatRef.current.scrollIntoView({
      behavior: 'smooth',
      block: 'nearest',
      inline: 'center',
    })
  }

  return (
    <>
      <nav>
        <button onClick={handleScrollToFirstCat}>Tom</button>
        <button onClick={handleScrollToSecondCat}>Maru</button>
        <button onClick={handleScrollToThirdCat}>Jellylorum</button>
      </nav>
      <div>
        <ul style={{ display: 'flex', listStyleType: 'none' }}>
          <li>
            <img src="http://43.142.23.165:8149/%E8%AD%A6%E5%91%8A%E5%BC%B9%E7%AA%97.png" alt="Tom" ref={firstCatRef} />
          </li>
          <li>
            <img src="http://43.142.23.165:8149/%E8%AD%A6%E5%91%8A%E5%BC%B9%E7%AA%97.png" alt="Maru" ref={secondCatRef} />
          </li>
          <li>
            <img src="http://43.142.23.165:8149/%E8%AD%A6%E5%91%8A%E5%BC%B9%E7%AA%97.png" alt="Jellylorum" ref={thirdCatRef} />
          </li>
        </ul>
      </div>
    </>
  )
}

function VideoPlayer() {
  const [isPlaying, setIsPlaying] = useState(false)
  const videoRef = useRef(null)
  function handleClick() {
    const nextIsPlaying = !isPlaying
    setIsPlaying(nextIsPlaying)
    if (nextIsPlaying) {
      videoRef.current.play()
    } else {
      videoRef.current.pause()
    }
  }

  return (
    <>
      <button onClick={handleClick}>{isPlaying ? '暂停' : '播放'}</button>
      <video ref={videoRef} width="250">
        <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
      </video>
    </>
  )
}

/**
 * 手动操作 另一个 组件的 DOM 节点会使你的代码更加脆弱
 * React 何时添加 refs?
 * Refs 是一种脱围机制。你应该只在你必须“跳出 React”时使用它们。这方面的常见示例包括
 *    管理焦点、滚动位置或调用 React 未暴露的浏览器 API
 * 避免更改由 React 管理的 DOM 节点
 * @returns
 */
export default function App() {
  return (
    <div>
      {/* <CatFriends /> */}
      <VideoPlayer />
    </div>
  )
}
